<!--
 * @Author: your name
 * @Date: 2020-11-05 15:02:30
 * @LastEditTime: 2021-03-18 19:13:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ws-shop\src\components\WsCateItem.vue
-->
<template>
  <router-link :to="`/detail?id=${id}`" class="cate-item" tag="div">
    <div class="cate-item-img">
      <img :src="image"/>
    </div>
    <div v-if="type === 1">
      <p class="cate-item-title">{{title}}</p>
      <p class="cate-item-intro">
        <span>￥{{price | toFix2}}</span>
        <span>销量：{{saleNum}}</span>
      </p>
    </div>
  </router-link>
</template>

<script>
export default {
  name: 'WsCateItem',
  props: ['id', 'title', 'image', 'price', 'saleNum', 'type']
}
</script>

<style lang="scss" scoped>
.cate-item {
    &-img {
      width: 100%;
      img {
        width: 100%;
      }
    }
    &-title {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    &-intro {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span:first-child {
        color: #ee0a24;
        font-size: 12px;
      }
    }
  }
</style>
